<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--视图层DOM-->
<div id="app">
    <!--拿到数据data-->
   {{ message }}
</div>
<!--
    ViewModel在浏览器端显示
    ViewModel连接视图和数据的中间件
    ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
    ViewModel 能够监听到视图的变化，并能够通知数据发生改变
    Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定
-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>
<script>
    var vm = new Vue({
        /*元素，这就绑定了div里面的元素*/
        el:"#app",
        /*data交给前端*/
        <!--Model模型层，控制视图层-->
        data:{
            message:"hello vue"
        }
    });
</script>
</body>
</html>